import Taro from '@tarojs/taro-rn';
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Image } from "@tarojs/components-rn";
import { getRuntime, servicePhoneNumber } from "../../utils/common";
import aboutStyleSheet from "./about_styles";

import right from "../../assets/img/right.png";
import bg_20 from "../../assets/img/bg_20.jpg";
import logo from "../../assets/img/logo.png";
import icon_92 from "../../assets/img/icon_92.png";
import jwt from "../../assets/img/jwt_code.jpg";
// 关于我们
var _styleSheet = aboutStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let Personnel = class Personnel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow: false
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '关于我们' });
  }
  open() {
    this.setState({
      isShow: true
    });
  }
  close(e) {
    e.stopImmediatePropagation();
    this.setState({
      isShow: false
    });
  }
  makePhone() {
    if (servicePhoneNumber) {
      getRuntime().makePhoneCall(servicePhoneNumber);
    }
  }
  // 腾讯地图连接
  handelRouter() {
    let key = '3PIBZ-OMGKU-ZVLVY-2QK3Z-EC2RF-D7FP4';
    let referer = '建务通-公众号';
    let url = `https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:25.092918,102.751205;title:捷浩国际控股集团;addr:昆明市盘龙区铂金大道羊肠
                 新村47栋5号别墅&key=${key}&referer=${referer}`;
    window.location.href = url;
  }
  link(url) {
    window.location.href = url;
  }
  render() {
    let { isShow } = this.state;
    return <View style={_styleSheet["my-about"]}>
        <View style={_styleSheet["header"]}>
          <Image src={bg_20} style={_styleSheet["img-bg"]} />
          <Image src={logo} style={_styleSheet["img-logo"]} />
        </View>

        <View style={_styleSheet["my-from"]}>
          <View style={_styleSheet["item-group"]}>
            <View onClick={this.link.bind(this, 'http://www.jiehaojt.com/')} style={_styleSheet["line"]}>
              <View style={_styleSheet["list-title"]}>公司官网</View>
              <View style={_styleSheet["list-desc"]}>
                http://www.jiehaojt.com
                <Image src={right} style={[_styleSheet["img"], _styleSheet["icon-drop-down"]]} />
              </View>
            </View>

            <View onClick={this.open.bind(this)} style={_styleSheet["line"]}>
              <View style={_styleSheet["list-title"]}>微信公众号</View>
              <View style={_styleSheet["list-desc"]}>
                <Image src={jwt} style={_styleSheet["img-code"]} />
                <Image src={right} style={[_styleSheet["img"], _styleSheet["icon-drop-down"]]} />
              </View>
            </View>

            <View onClick={this.makePhone.bind(this)} style={_styleSheet["line"]}>
              <View style={_styleSheet["list-title"]}>客服热线</View>
              <View style={_styleSheet["list-desc"]}>{servicePhoneNumber}
                <Image src={right} style={[_styleSheet["img"], _styleSheet["icon-drop-down"]]} />
              </View>
            </View>

            <View onClick={this.makePhone.bind(this)} style={_styleSheet["line"]}>
              <View style={_styleSheet["list-title"]}>合作加盟</View>
              <View style={_styleSheet["list-desc"]}>{servicePhoneNumber}
                <Image src={right} style={[_styleSheet["img"], _styleSheet["icon-drop-down"]]} />
              </View>
            </View>

            <View onClick={this.handelRouter.bind(this)} style={_styleSheet["line"]}>
              <View style={_styleSheet["list-title"]}>公司地址</View>
              <View style={_styleSheet["list-desc"]}>
                <Image src={icon_92} style={_styleSheet["img-address"]} />
                <View>查看</View>
                <Image src={right} style={[_styleSheet["img"], _styleSheet["icon-drop-down"]]} />
              </View>
            </View>
          </View>
        </View>

      
      
      <View onClick={this.close.bind(this)} style={_getStyle(isShow ? 'qrcode qrcode-active' : 'qrcode')}>
        <View style={_styleSheet["content"]}>
          <View style={_styleSheet["title"]}>建务通微信公众号</View>
          <Image src={jwt} style={_styleSheet["code"]} />
          <View style={_styleSheet["info"]}>微信扫一扫  关注我们</View>
        </View>
      </View>
      </View>;
  }
};

export default Personnel;